<!DOCTYPE html>
<?php
    $imageWidth = 100;
    $imageHeight = 100;
    $numberOfImages=100;
    
    $imageWidth     = isset($_GET['w']) ? $_GET['w'] : $imageWidth;
    $imageHeight    = isset($_GET['h']) ? $_GET['h'] : $imageHeight;
    $numberOfImages = isset($_GET['n']) ? $_GET['n'] : $numberOfImages;
    
?>
<html>
<head>
    <title>Random images loaded sequentially</title>
    <style type="text/css" media="screen">
    
        /* reset - begin */
        
        /* http://meyerweb.com/eric/tools/css/reset/ 
           v2.0 | 20110126
           License: none (public domain)
        */

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure, 
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    
        /* reset - end */

        #topMenuContainer,
        #bottomMenuContainer {
            position: fixed;
            width: 100%;        
            background-color: #fff;
        }
        
        #topMenuContainer {
            top:0;
            border-bottom: 1px solid;
            margin-bottom: 10px;
        }
    
        #topMenuContainer .wrapper, 
        #bottomMenuContainer .wrapper{
            padding: 5px;
        }
    
        #menuImagesContainer, #topMenuContainer {
            text-align: center;
        }
        
        #topMenuContainer a{
            color: #000;
        }
        
        #topMenuContainer a:hover {
            color: #d00;
        }
        
        #menuImagesContainer .container{
            display:inline;
        }
        #menuImagesContainer img {
            width: 700px;
            height: 989px;
        }
        
        #bottomMenuContainer {
            bottom: 0;
            border-top: 1px solid;
            margin-top: 10px;
        }
    </style>
    <style type="text/css" media="screen">
        .imageContainer {
            float: left;
            height: <?php echo $imageHeight ?>px
        }
    </style>
</head>
<body>
    <h1>Images loaded sequentally</h1>
    <div id="messagesContainer"></div>
    <script type="text/javascript" src="js/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var counter=0;
            var imageHeight = <?php echo $imageHeight?>;
            var imageWidth = <?php echo $imageWidth?>;
            var numberOfImages = <?php echo $numberOfImages?>;
            
            var initiateImage = function (img) {
                img.src = "random-image.php?w="+imageWidth+"&h="+imageHeight+"&ticker=" + Math.random();
                counter++;
                var message = $('<p></p>').append('Loading image '+counter+'...');
                $("#messagesContainer").append(message);
                if(counter < numberOfImages) {
                    img.onload = function () {
                        message.append(' done');
                        setTimeout(function(){
                            var newImage = new Image();
                            message.remove();
                            initiateImage(newImage);
                        }, 20);
                        
                    }
                }
            }

            var newImage = new Image();
            initiateImage(newImage);            
            
        });
    </script>
</body>
</html>